<template>
	<div>
		<el-form v-model="empQueryForm" inline size="mini" style="text-align: left">
			<el-form-item>
				<el-button @click="getEmpListByPage" type="primary" >查询</el-button>
			</el-form-item>
			<el-form-item style="float: right">
				<el-button v-if="hasAuth('emp:add')" @click="showAddEmpDialogHandler" type="primary" >新增</el-button>
			</el-form-item>
		</el-form>
		<el-dialog :visible.sync="showEmpDialog" v-if="showEmpDialog" fullscreen :modal="false">
			<el-form :model="emp" label-width="130px" size="mini">
				<el-form-item label="员工编号">
					<el-input v-model="emp.empno"></el-input>
				</el-form-item>
				<el-form-item label="姓名">
					<el-input v-model="emp.ename"></el-input>
				</el-form-item>
				<el-form-item label="工作">
					<el-input v-model="emp.job"></el-input>
				</el-form-item>
				<el-form-item label="领导编号">
					<el-input v-model="emp.mgr"></el-input>
				</el-form-item>
				<el-form-item label="入职日期">
					<el-input v-model="emp.hiredate"></el-input>
				</el-form-item>
				<el-form-item label="工资">
					<el-input v-model="emp.sal"></el-input>
				</el-form-item>
				<el-form-item label="提成">
					<el-input v-model="emp.comm"></el-input>
				</el-form-item>
				<el-form-item label="部门编号">
					<el-input v-model="emp.deptno"></el-input>
				</el-form-item>
				<el-form-item label="">
					<el-input v-model="emp.delete"></el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="showEmpDialog = false">取消</el-button>
				<el-button @click="empDialogConfirm()">确定</el-button>
			</div>
		</el-dialog>
		<el-table :data="empList">
			<el-table-column prop="empno" label="员工编号"></el-table-column>
			<el-table-column prop="ename" label="姓名"></el-table-column>
			<el-table-column prop="job" label="工作"></el-table-column>
			<el-table-column prop="mgr" label="领导编号"></el-table-column>
			<el-table-column prop="hiredate" label="入职日期"></el-table-column>
			<el-table-column prop="sal" label="工资"></el-table-column>
			<el-table-column prop="comm" label="提成"></el-table-column>
			<el-table-column prop="deptno" label="部门编号"></el-table-column>
			<el-table-column prop="delete" label=""></el-table-column>
			<el-table-column label="操作" width="150" v-if="hasAuth('emp:update')||hasAuth('emp:delete')">
				<template slot-scope="scope">
					<el-button class="el-icon-edit-outline" @click="showUpdateEmpDialogHandler(scope.$index, scope.row)" v-if="hasAuth('emp:update')" type="primary" size="mini"></el-button>
					<el-button class="el-icon-delete-solid" @click="deleteEmp(scope.$index, scope.row)" v-if="hasAuth('emp:delete')" type="danger" size="mini"></el-button>
				</template>
			</el-table-column>
		</el-table>
		<el-pagination
			@size-change="sizeChangeHandle" @current-change="currentChangeHandle"
			layout="total, sizes, prev, pager, next, jumper" :current-page="currentPage"
			:page-sizes="[10,15,30,50]" :page-size="pageSize" :total="total">
		</el-pagination>
	</div>
</template>
<script>
	export default {
		name: "Emp",
		data: function () {
			return {
				showEmpDialog: false,
				empQueryForm: {},
				operationType: "",
				empList: [],
				// 新增(新增前需要清空emp),编辑(需要将当前行赋值给emp),查询(与查询条件双向绑定)共用
				emp: {},
				total: 0,
				currentPage: 1,
				pageSize: 10,
				sortInfo: null
			}
		},
		methods: {
			showUpdateEmpDialogHandler(index, row) {
				this.operationType = "update";
				this.emp = row;
				this.showEmpDialog = true;
			},
			showAddEmpDialogHandler() {
				this.operationType = "add";
				this.emp = {};
				this.showEmpDialog = true;
			},
			empDialogConfirm() {
				if (this.operationType === "add") {
					this.addEmp()
				}
				if (this.operationType === "update") {
					this.updateEmp()
				}
				this.showEmpDialog = false;
			},
			async deleteEmp(index, row) {
				this.$confirm('确定要删除?', '提示', {confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning'}).then(() => {
					let url = `/emp/emp/` + row.empno;
					this.ajax(url,null,'delete').then((res) => {
						if (res.success) {
							this.getEmpListByPage();
						}
					})
				}).catch(() => {
					 this.$message({type: 'info', message: '已取消删除'});
				});
			},
			addEmp() {
				let url = `/emp/emp/`;
				this.ajax(url, this.emp, "POST").then(res => {
					if (res.success) {
						this.getEmpListByPage();
					}
				})
			},
			async updateEmp() {
				let url = `/emp/emp`;
				let res = await this.ajax(url, this.emp, "put");
					if (res.success) {
						this.getEmpListByPage();
					}
			},
			// pageSize变动,触发重新从后台加载数据
			sizeChangeHandle(pageSize) {
				this.pageSize = pageSize;
				this.getEmpListByPage();
			},
			// currentPage变动,触发从后台加载数据
			currentChangeHandle(currentPage) {
				this.currentPage = currentPage;
				this.getEmpListByPage();
			},
			async getEmpListByPage() {
				let url = `/emp/getEmpListByPage`;
				// 组装分页与排序
				this.empQueryForm.currentPage = this.currentPage;
				this.empQueryForm.pageSize = this.pageSize;
				this.empQueryForm.sortInfo = this.sortInfo;
				let res = await this.ajax(url, this.empQueryForm, 'POST');
				if (res.success) {
					this.empList = res.data.list;
					this.total = res.data.total;
				}
			},
		},
		mounted() {
			this.getEmpListByPage()
		}
	}
</script>
<style>

</style>
